<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="{$_C.hy_path}css/amazeui.min.css"/>
		<link rel="stylesheet" type="text/css" href="{$_C.hy_path}css/hy.common.css"/>
        <link rel="stylesheet" href="{$_C.hy_path}css/jquery.Jcrop.css" type="text/css" />
		<style type="text/css">
		img{ max-width: none;}
			.hy-upload-header{ overflow: hidden; min-height: 20px;padding: 19px;margin-bottom: 20px;background-color: #f5f5f5;border: 1px solid #e3e3e3;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);}
		    .ke-button-common{ display: none;}
		    select,.hy-upload-main input{ width: 100%; font-size: 14px;}
		    ul{ list-style-type: none;}
		    .hy-upload-main label{ border: 2px solid #ddd; width: 100%;background: #ddd;height: 30px;cursor: pointer;border-radius: 4px;line-height: 30px;padding-left: 10px;}
		    .am-icon-spinner{ font-size: 16px;}
		    .hy-upload-loading{ text-align: center;display: none;}
		</style>
	     
	</head>
	<body>
	<div class="am-g">
		<div class="hy-cutimg-header">
			<div class="am-u-md-2">
					<button class="am-btn am-btn-primary am-btn-block hy-js-scale">等比缩放</button>
			</div>
		</div>
		<div class="hy-cutimg-main">
			<div class="am-u-md-6">
			<img  id="target" src="{$img}"/>
			<div style="width:48px;height:48px;margin:10px;overflow:hidden; float:left;"><img  style="float:left;" id="preview" src="{$img}" ></div>
	<div style="width:190px;height:195px;margin:10px;overflow:hidden; float:left;"><img  style="float:left;" id="preview2" src="{$img}" ></div>
		</div>
		<div class="am-u-md-6">
			
		</div>
		</div>
		
		<div class="hy-cutimg-footer">
			<input type="hidden" id="x" name="x" />
		<input type="hidden" id="y" name="y" />
		<input type="hidden" id="w" name="w" />
		<input type="hidden" id="h" name="h" />
		<button class="am-btn am-btn-primary am-btn-block hy-js-savecut">保存截图</button>
			<button class="am-btn am-btn-primary am-btn-block hy-js-save">确定并返回</button>
		</div>
		
	</div>
	<script src="{$_C.hy_path}js/hy.base.js"></script>
	<script src="{$_C.hy_path}js/jquery-1.7.2.min.js"></script>
    <script src="{$_C.hy_path}js/amazeui.min.js"></script>	
  <script src="{$_C.hy_path}js/jquery.Jcrop.min.js" type="text/javascript"></script>
   <script>
    $(function($){

      // Create variables (in this scope) to hold the API and image size
      var jcrop_api, boundx, boundy;
      
      $('#target').Jcrop({
		minSize: [48,48],
		setSelect: [0,0,190,190],
        onChange: updatePreview,
        onSelect: updatePreview,
		onSelect: updateCoords,
      },
	function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        jcrop_api = this;
    });
	function updateCoords(c)
	{
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};
	function checkCoords()
	{
		if (parseInt($('#w').val())) return true;
		alert('Please select a crop region then press submit.');
		return false;
	};
      function updatePreview(c){
        if (parseInt(c.w) > 0)
        {
          var rx = 48 / c.w;		//小头像预览Div的大小
          var ry = 48 / c.h;

          $('#preview').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
	    {
          var rx = 199 / c.w;		//大头像预览Div的大小
          var ry = 199 / c.h;
          $('#preview2').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
      };
    });

  </script>
    <script type="text/javascript">
  
    $(function(){
    	$('.hy-js-savecut').live('click',function(){
    		var x=$('#x').val();
		    var y=$('#y').val();
		    var w=$('#w').val();
		    var h=$('#h').val();
		    var img="{$img}";
    		$.post('index.php?g=admin&m=index&a=act_cutimg',{img:img,w:w,h:h,x:x,y:y},function(result)
    		{
    			if(result.error)
    			{
    				
    			}
    		},'json');
    	});
    })
    	
   
    </script>
    <script src="{$_C.hy_path}js/admin.js" type="text/javascript" charset="utf-8"></script>
	</body>
	
</html>
